<template>
  <div>
    <h1>地图</h1>
    <div style="display:flex;">
      <div id="map"></div>
      <ul>
        <li
          v-for="(item, index) of list"
          :key="index"
          style="padding: 10px"
          @mouseover="showPoi(item)"
        >{{item.name}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      map: null,
      list: []
    };
  },
  mounted() {
    // 创建地图
    this.map = new AMap.Map("map");

    this.getList();
  },
  methods: {
    getList() {
      // 搜索地点, 全广州的如家酒店
      this.$axios({
        url: "https://restapi.amap.com/v3/place/text",
        params: {
          key: "541784d3abf0db4b0f5bf69ab21e29e7",
          keyword: "如家",
          city: "广州",
          // 如果想搜索的时候获取风景或者交通不同的内容
          types: "风景"
        }
      }).then(res => {
        // 这里是结果数据, 然后用来渲染列表
        console.log(res.data);
        this.list = res.data.pois;
        this.setMarkers();
      });
    },
    setMarkers() {
      const markers = this.list.map(element => {
        const marker = new AMap.Marker({
          title: element.name,
          // position: new AMap.LngLat(116.39, 39.9),
          position: new AMap.LngLat(...element.location.split(",")),
          // 需要标记 id 的话,可以使用高德提供的提个固定属性
          extData: element.id
        });

        // 添加 mouseover 事件
        marker.on("mouseover", () => {
          return this.showPoi(element);
        });

        return marker;
      });
      this.map.clearMap();
      this.map.add(markers);
      // 自动匹配显示位置
      this.map.setFitView();
    },
    showPoi(item) {
      // 1.拿到所有的点
      const markers = this.map.getAllOverlays("marker");

      // 2.遍历
      markers.forEach(marker => {
        if (marker.getExtData() == item.id) {
          // 将匹配的点标记移动到顶部
          marker.setTop(true);

          // 附加显示一个弹窗
          const infoWindow = new AMap.InfoWindow({
            content: `<span>${marker.getTitle()}</span>`,
            offset: new AMap.Pixel(0, -32)
          });
          infoWindow.open(this.map, marker.getPosition());

          // 将这个点居中
          this.map.setCenter(marker.getPosition());
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
#map {
  width: 500px;
  height: 500px;
}
</style>